<template>
  <a-card :bordered="false" class="card-area">
    <div>
      <!-- 搜索区域 -->
      <a-form layout="horizontal">
        <div class="fold">
          <a-row>
            <a-col :md="12" :sm="24" >
              <a-form-item
                label="手机号"
                :labelCol="{span: 4}"
                :wrapperCol="{span: 18, offset: 0}">
                <a-input v-model="queryParams.mobileNo"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24" >
              <a-form-item
                label="微信OpenID"
                :labelCol="{span: 4}"
                :wrapperCol="{span: 18, offset: 0}">
                <a-input v-model="queryParams.wechatOpenId"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24" >
              <a-form-item
                label="支付宝账号"
                :labelCol="{span: 4}"
                :wrapperCol="{span: 18, offset: 0}">
                <a-input v-model="queryParams.alipayUserId"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24" >
              <a-form-item
                label="会员卡号"
                :labelCol="{span: 4}"
                :wrapperCol="{span: 18, offset: 0}">
                <a-input v-model="queryParams.cardNo"/>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <span style="float: right; margin-top: 3px;">
          <a-button type="primary" @click="search">查询</a-button>
          <a-button style="margin-left: 8px" @click="reset">重置</a-button>
        </span>
      </a-form>
    </div>
    <div>
      <!-- 表格区域 -->
      <a-table ref="TableInfo"
               :columns="columns"
               :rowKey="
                 (record, index) => {
                   return index;
                 }
               "
               :dataSource="dataSource"
               :pagination="pagination"
               :loading="loading"
               @change="handleTableChange"
               :scroll="{ x: 1300 }">
        <template slot="operation" slot-scope="text, record">
          <a class="text-btn" v-hasPermission="['memberManager:view']" @click="view(record)">详情</a>
          <a-badge status="warning" text="无权限" v-has-no-permission="['memberManager:view']"></a-badge>
        </template>
      </a-table>
    </div>
    <!-- 详情 -->
    <member-manager-info
      ref="memberInfo"
      :memberManagerInfoVisiable="memberInfo.visiable"
      @close="handleMemberInfoClose">
    </member-manager-info>
  </a-card>
</template>

<script>
import MemberManagerInfo from './MemberManagerInfo'
import { mapState } from "vuex"

export default {
  name: 'MemberManager',
  components: {MemberManagerInfo},
  data () {
    return {
      memberInfo: {
        visiable: false,
        data: {}
      },
      queryParams: {
        mobileNo:'',
        wechatOpenId:'',
        alipayUserId:'',
        cardNo:'',
      },
      filteredInfo: null,
      sortedInfo: null,
      paginationInfo: null,
      dataSource: [],
      selectedRowKeys: [],
      loading: false,
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      }
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.account.user
    }),
    columns () {
      let { sortedInfo, filteredInfo } = this
      sortedInfo = sortedInfo || {}
      filteredInfo = filteredInfo || {}
      return [{
        title: '会员ID',
        dataIndex: 'memberId',
        width: 100,
        align: 'left'
      },{
        title: '会员主手机号',
        dataIndex: 'mobileNo',
        width: 120,
        align: 'left'
      }, {
        title: '会员主微信号OpenID',
        dataIndex: 'wechatOpenId',
        width: 180,
        align: 'left'
      }, {
        title: '会员主支付宝UserID',
        dataIndex: 'alipayUserId',
        width: 180,
        align: 'left',
      }, {
        title: '会员主卡号',
        dataIndex: 'cardNo',
        width: 120,
        align: 'left'
       }, {
        title: '性别',
        dataIndex: 'gender',
        width: 60,
        align: 'left',
        customRender: (text, row, index) => {
          switch (text) {
            case '0':
              return '未知'
            case '1':
              return '男'
            case '2':
              return '女'
            case '3':
              return '其他'
            default:
              return text
          }
        }
      },{
        title: '会员生日',
        dataIndex: 'birthday',
        width: 120,
        align: 'left'
      }, {
        title: '会员等级',
        dataIndex: 'level',
        width: 90,
        align: 'left',
        customRender: (text, row, index) => {
          if (text === "0") return '初始等级';
          else return '其他';
        }
      }, {
        title: '会员创建方式',
        dataIndex: 'createMethod',
        width: 120,
        align: 'left',
        customRender: (text, row, index) => {
          if (text === "0") return '关联整合';
          if (text === "1") return '微信交易';
          if (text === "2") return '支付宝交易';
          if (text === "3") return '银行卡交易';
          if (text === "4") return '手机号领取卡券';
          if (text === "5") return '线上支付';
          else return '';
        }
      }, {
        title: '会员创建时间',
        dataIndex: 'createDate',
        width: 130,
        align: 'left'
      }, {
        title: "操作",
        fixed: "right",
        scopedSlots: { customRender: "operation" },
      },]
    }
  },
  mounted () {
    this.fetch()
  },
  methods: {
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    view (record) {
      this.$refs.memberInfo.resetMemberId(record.memberId)
      this.memberInfo.visiable = true
    },
    handleMemberInfoClose () {
      this.memberInfo.visiable = false
    },
    search () {
      let {sortedInfo, filteredInfo} = this
      let sortField, sortOrder
      // 获取当前列的排序和列的过滤规则
      if (sortedInfo) {
        sortField = sortedInfo.field
        sortOrder = sortedInfo.order
      }
      this.fetch({
        sortField: sortField,
        sortOrder: sortOrder,
        ...this.queryParams,
        ...filteredInfo
      })
    },
    reset () {
      // 取消选中
      this.selectedRowKeys = []
      // 重置分页
      this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent
        this.paginationInfo.pageSize = this.pagination.defaultPageSize
      }
      // 重置列过滤器规则
      this.filteredInfo = null
      // 重置列排序规则
      this.sortedInfo = null
      // 重置查询参数
      this.queryParams = {}
      this.fetch()
    },
    handleTableChange (pagination, filters, sorter) {
      // 将这三个参数赋值给Vue data，用于后续使用
      this.paginationInfo = pagination
      this.filteredInfo = filters
      this.sortedInfo = sorter

      this.memberInfo.visiable = false
      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...this.queryParams,
        ...filters
      })
    },
    fetch (params = {}) {
      // 显示loading
      this.loading = true
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
        params.pageSize = this.paginationInfo.pageSize
        params.pageNum = this.paginationInfo.current
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize
        params.pageNum = this.pagination.defaultCurrent
      }
      this.$get('/admin/market/memberManager/getMemberList', {
        ...params
      }).then((r) => {
        let data = r.data
        const pagination = { ...this.pagination }
        pagination.total = data.total
        this.dataSource = data.rows
        this.pagination = pagination
        // 数据加载完毕，关闭loading
        this.loading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../../../../../static/less/Common";
</style>
